<template>
  <div class="comments">
      <div class="commentsList" v-for="(item,index) in newarr" :key="index">
        <el-row type="flex" align="middle" class="userInfo">
             <img :src="item.account.defaultAvatar" alt="">
             <span class="userName">{{item.account.nickname}}</span>
             <span class="time">2019-11-20 10:39</span>
             <span class="number">{{index + 1}}</span>
         </el-row>
         <div class="conents">
         <commentReply :commentItem="item" @revert="revert"/>
         <div class="ReplyItem">
         <div class="content">
            <p>{{item.content}}</p>
         </div>
         <div class="demo-image__preview" v-if="!item.pics.length == 0">
        <el-image 
            style="width: 80px; height: 80px"
            v-for="(element,index) in item.pics"
            :src="element.url || ''" 
            :preview-src-list="item.srcList || []"
            :key="index">
        </el-image>
         </div>

        <div class="btn"><a href="javascript:;" class="Reply" @click="revert(item.id,item.account.nickname)">回复</a></div>
         </div>
        </div>
      </div>
      <span v-show="false">{{poato}}</span>
  </div>
</template>

<script>
import  commentReply from '@/components/post/commentReply';
export default {
    components:{
        commentReply
    },
    props:{
        dataList:{
            type:Array, 
            default:{}
        }
    },
    data() {
      return {
          newarr:[],
      }  
    },
    computed:{
        poato(){
            this.dataList.forEach(item=>{
                   if(!item.pics.length){
                       return
                   }else{
                        item.srcList = []
                        const newsrcList=[]
                       item.pics.forEach(element=>{
                           const index =element.url.indexOf('http')
                           if(index === -1){
                               element.url = this.$axios.defaults.baseURL + element.url;
                           }
                            newsrcList.push(element.url)
                       })
                       item.srcList = newsrcList
                   }
                   
               })
                  this.newarr=this.dataList
                  console.log(this.newarr);
                  
        }

    },
    methods:{
        revert(id,nickname){
            // console.log(id)
            // console.log(nickname)
            this.$emit('revert',id,nickname)
        }
    }
        
           
        

    

}
</script>

<style lang="less" scoped>
.comments{
    margin-top: 30px;
    border: 1px solid #e4e4e4;
    .commentsList{
        // position: relative;
        border-bottom: 1px dashed #e4e4e4;
        padding: 20px 20px 5px;
        .userInfo{
            margin-bottom: 10px;
            & >img{
                width: 16px;
                height: 16px;
                border-radius: 50%;
            }
            .userName{
                font-size: 14px;
                color: #68739a;
                padding: 0 10px;
            }
            .time{
                font-size: 12px;
                color: #acbad1;
            }
            .number{
                width: 443px;
                text-align: right;
                font-size: 12px;
                color: #999;
            }
        }

    }
    .conents{

        padding-left: 30px;
            .content{
                & >p{
                    color:#666;
                    margin-top: 10px;
                }
            }
            .demo-image__preview{
                margin: 10px 0;
            }
    }
    .ReplyItem{
       
        .btn{
            position: relative;
            height: 20px;
            .Reply{
                position: absolute;
                bottom: 0;
                right: 0;
                text-align: right;
                font-size: 12px;
                color: blue;
            }
        }
    }
}

</style>